<template>
  <el-dialog :close-on-press-escape="false" :close-on-click-modal="false"

    :visible.sync="visible"
    :title="title"
    width="30%"
  >
    <div v-loading="confirmLoading" style="display: flex">
      <div style="flex:1">
        <div>
          <el-input placeholder="" />
          <el-button @search="onAdd">
            添加
          </el-button>
        </div>
        <div style="border-bottom: 1px solid #f0f2f5;box-sizing: border-box;margin-top: 16px">
          <el-button @search="onSearch">
            搜索
          </el-button>
        </div>

        <div style="height: 500px;overflow-y: scroll;margin-top: 8px;border: 1px solid #f0f2f5">
          <div v-for="(item,key) in list" :key="key" style="border-bottom: 1px solid #f0f2f5;display: flex;align-items: center;padding: 5px">
            <div style="flex: 1;display: flex;align-items: center;padding-left: 16px">
              {{ item.dict_name }}
            </div>
            <div>
              <a-button type="primary" shape="circle" icon="delete" @click="onDel(item.id)" />
            </div>
          </div>
        </div>
      </div>

    </div>

  </el-dialog>
</template>

<script>
export default {
  name: 'DictSet',
  data() {
    return {
      list: [],
      item_name: '',
      search_name: '',
      dice_key: 'User_sex',
      loading: false,
      visible: false,
      confirmLoading: false,
      title: ''
    }
  },
  watch: {
    visible: function(val) {
      if (!val) {
        this.$emit('close')
      }
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    onSearch(val) {
      this.getData(val)
    },
    onAdd(val) {
      this.loading = true
      post('admin/dict/type-add', { dict_key: this.dice_key, dict_name: val }).then((res) => {
        this.loading = false
        this.$message.success(res.message)
        this.getData()
      }).catch((e) => {
        this.loading = false
      })
    },
    onDel(id) {
      const { getData, $message, loading } = this
      var that = this
      this.$confirm({
        title: '警告',
        content: `确认删除吗?`,
        okText: '删除',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          // 在这里调用删除接口
          that.loading = true
          post('admin/dict/type-del', { id: id }).then((res) => {
            $message.success(res.message)
            that.loading = false
            getData()
          }).catch((e) => {
            const message = e.message || '删除失败'
            $message.error(message)
          })
        },
        onCancel() {
          console.log('Cancel')
        }
      })
    },
    getData(dict_name = '') {
      this.loading = true
      get('admin/dict/type-list', { dict_key: this.dice_key, dict_name: dict_name }).then((res) => {
        this.list = res
        this.loading = false
      })
    },
    edit(record) {
      this.formType = 'update'
      this.title = record && record['name'] ? '编辑 ' + record['name'] : '编辑'
      this.visible = true
      this.loadOption().then((res) => {
        this.$store.commit(this.storePath + '/setFormOptions', res)
        this.loadDetail(record[this.storeData.form.priKey])
      })
    },
    show(title, dict_key) {
      this.title = title
      this.dice_key = dict_key
      this.getData()
      this.visible = true
    },
    loadOption() {
      // 获取数据
      return post(this.storeData.form.url.options)
    },
    loadDetail(id) {
      var databody = {
        id: id
      }
      // 获取数据
      get(this.storeData.form.url.detail, databody).then((response) => {
        Object.keys(response).map((item) => {
          this.storeData.form.items && this.storeData.form.items.map((formItem, key) => {
            if (item == formItem.field) {
              if (formItem.tpl == 'switch') {
                formItem.value = response[item] == 1
              } else {
                formItem.value = response[item]
              }
            }
          })
        })
        this.storeData.form.loading = false
      })
    },
    handSubmit() {
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          var submitData = getFormSubData(this.storeData.form.items)
          var databody = {}
          databody['submit_data'] = JSON.stringify(submitData)
          databody['submit_type'] = this.formType
          post(this.storeData.form.url.update, databody).then((res) => {
            lp.$message.success(res.message || '保存成功')
            this.$emit('ok')
            this.$store.commit(this.storePath + '/reset', 'form')
            this.visible = false
          }).catch((e) => {

          })
        }
      })
    },
    handleCancel() {
      this.visible = false
    }
  }
}
</script>

<style scoped>

</style>
